<template>
    <el-dialog class="ui-qr-code-dialog" v-model="dialogVisible" :title="dialogTitle" ref="dialog" :close-on-click-modal="false" :close-on-press-escape="false" @opened="init" @closed="finalThings">
        <template v-if="stage==1">
            <div class="box-row">
                <div style="flex:1"></div>
                <qr-code size="230px" :text="qrcode"></qr-code>
                <div style="flex:1"></div>
            </div>
        </template>
        <template #footer>
            <div class="box-row">
                <div style="flex:1"></div>
                <el-button size="default" type="primary" @click="onCancel" :disabled="loading"><i :class="['ui-ico', loading?'ui-ico-loading':'ui-ico-exit']" /> &nbsp; 取消(Esc)</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
import { reactive, toRefs } from 'vue'
import { useSocket } from '../../uiframe/services/socket';
import QrCode from '../../uiframe/layout/components/QrCode.vue';

export default {
    components:{
        QrCode
    },
    props:{
        q:Object,
        done: Function,
        onSuccess:Function,
    },
    setup(props)
    {
        let out_trade_no = null, timeoutId = null,timeout = 60,data = reactive({
            data:{},
            dialogVisible: true,
            dragabletable:null,
            form:null,
            stage:0,
            qrcode:'',
            dialogTitle:'扫码付款',
            loading:false
        });
        
        data.dialogTitle = `扫码付款(${timeout})`;
        timeoutId = setInterval(() => {
            timeout --;
            data.dialogTitle = `扫码付款(${timeout})`;
            if(timeout == 0){
                clearInterval(timeoutId); timeoutId=null;
            }
        }, 1000);

        const methods = {
            onCancel : ()=>{
                useSocket().then(socket=>{
                    if(data.loading) return;
                    data.loading= true;
                    socket.rpc('qrpay.cancel', {out_trade_no}, 18000).then(res=>{
                        data.loading= false;
                        props.q.reject(res)
                        data.dialogVisible = false;
                    }).catch(err=>{
                        data.loading= false;
                    })
                });
            },
            finalThings: () =>{
                props.done()
            },
            init:()=>{},
            onSure:()=>{
                
            }
        }
        props.onSuccess(null, 60).update((res)=>{
            out_trade_no = res.data.out_trade_no
            data.qrcode = res.data.qrcode
            data.stage = 1;
            console.log('on update message:', res)
        }).then(res=>{
            props.q.resolve(res)
            data.dialogVisible = false;
        }).catch(err=>{
            props.q.reject(err)
            data.dialogVisible = false;
        })

        return {
            ...toRefs(data),
            ...methods
        }
    }
}
</script>

<style lang="scss">
.ui-qr-code-dialog{
    width: 36rem;
    max-width: 36rem;
    min-width: 36rem;
}
</style>